@mixin borderRadius($v) {
  -ms-border-radius: &v;
  border-radius: $v;
}

/*4.4 幻灯片
  name:      hui-carousel
  sample:
    <div id="hui-carousel-1">
      <div class="hui-carousel">
        <div class="bd">
          <ul>
            <li><a href="http://www.h-ui.net/" target="_blank"><img src="temp/banner-1.jpg" ></a></li>
            <li><a href="http://www.h-ui.net/zhaishang.shtml" target="_blank"><img src="temp/banner-2.jpg" ></a></li>
            <li><a href="http://h-ui.net/H-ui.admin.shtml" target="_blank"><img src="temp/banner-4.jpg" ></a></li>
          </ul>
        </div>
        <ol class="hd clearfix dots">
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ol>
      </div>
    </div>
    <script type="text/javascript" src="lib/jquery.SuperSlide/2.1.1/jquery.SuperSlide.min.js"></script>
    <script type="text/javascript">
    $(function() {
      jQuery("#hui-carousel-1 .hui-carousel").slide(
        {
          mainCell: ".bd ul",
          titCell: ".hd li",
          trigger: "click",
          effect: "leftLoop",
          autoPlay: true,
          delayTime: 700,
          interTime: 3000,
          pnLoop: false,
          titOnClassName: "active"
        }
      );
    });
    </script>
  explain: 默认dots为圆点，在slider后面追加numSlider样式就变成带数字的方框，boxSlider为不带数字长方条
*/
/*请给每个幻灯片套个div并设置id，通过id重置这个地方的宽度，达到自定义效果*/
.hui-carousel {
  position: relative;
  text-align: center;
  margin: 0 auto;
  z-index: 1;
  .bd,
  .bd li,
  .bd img {
    width: 100%;
    height: 100%;
  }
  .bd {
    z-index: 2;
    overflow: hidden;
    li {
      float: left;
      width: 100%;
      overflow: hidden;
      background-position: center;
      background-repeat: no-repeat;
      a {
        display: block;
        width: 100%;
        height: 100%;
      }
      img {
        display: block;
      }
    }
  }
  .hd {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 10px;
    padding: 0 10px;
    text-align: center;
    li {
      display: inline-block;
      text-align: center;
      margin-right: 10px;
      cursor: pointer;
      background-color: #C2C2C2;
      &.active {
        background-color: #222;
      }
    }
    /*圆点*/
    &.dots {
      li {
        width: 10px;
        height: 10px;
        font-size: 0px;
        line-height: 0px;
        @include borderRadius(50%);
      }
    }
    /*数字*/
    &.numbox {
      li {
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 13px;
        font-family: Arial;
        font-weight: bold;
        text-indent: inherit;
        &.active {
          color: #fff
        }
      }
    }

    /*长方条*/
    &.rectangle {
      li {
        width: 40px;
        height: 10px;
        font-size: 0px;
        line-height: 0px
      }
    }
  }

  .hui-carousel-arrow {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    z-index: 3;
    opacity: 0.7;
    filter: alpha(opacity=70);
    &:hover {
        opacity: 1;
        filter: alpha(opacity=100)
    }
    &.prev {
        left: 0;
    }
    &.next {
        right: 0;
    }
  }
}